<template >
  <basic-container>
    <avue-form  ref="form"
                v-model="obj"
                :option="option">
      <template slot="table" slot-scope="scope">
        <avue-crud :option="materialOption"
                   :data="data"
                   @on-load="onLoad"
                   :page.sync="page"
                   :table-loading="loading"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange">
        </avue-crud>
      </template>

    </avue-form>
  </basic-container>
</template>
<script>
    import {optionGuideHistory} from "@/option/acceptance/serviceItem";
    import {materialHistoryPage} from "@/api/acceptance/taskgeneralbasicHistory";
    import {mapGetters} from "vuex";

    export default {
        name: "service-guide",
        components: {},
        data() {
            return {
                tabOtion:{
                  column:[]
                },
                obj: {},
                option: optionGuideHistory,
                //材料
                materialOption: {
                    border: true,
                    index: true,
                    indexLabel: "序号",
                    viewBtn: false,
                    simplePage: true,
                    editBtn: false,
                    addBtn: false,
                    delBtn: false,
                    refreshBtn: false,
                    align: 'center',
                    columnBtn: false,
                    menu: false,
                    column: [
                        {
                            label: "材料名称",
                            prop: "materialname",
                            width: '600px',
                            align: 'left',
                        },
                        {
                            label: "材料类型",
                            prop: "materialtype",
                            type: "select",
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=material_type",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        },
                        {
                            label: "材料形式",
                            prop: "materialformat",
                            type: "select",
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=material_format",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        }, {
                            label: "材料必要性",
                            prop: "isneed",
                            type: "select",
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=is_need",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                        }
                    ]

                },
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                loading: false,
                data: [],
                query: {}
            };
        },
        computed: {
            ...mapGetters(["permission"]),
        },
        props: {
          serviceItemOneHistory:{}
        },
        created(){
            this.filterPlaceholder();
            this.initData();
        },
        methods: {
            initData(){
              this.obj = this.serviceItemOneHistory;
            },
            onLoad(page, params = {}) {
                this.loading = true;
                params.taskcode = this.serviceItemOneHistory.taskcode;
                params.tasktype = this.serviceItemOneHistory.tasktype;
                params.taskguid = this.serviceItemOneHistory.rowguid;
              materialHistoryPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                });
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1;
                this.onLoad(this.page, params);
                done();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page, this.query);
            },
            filterPlaceholder(){
              this.option.group.forEach(g => {
                g.column.forEach(c =>{
                  c.placeholder = false;
                })
              })
            }
        },
        watch: {}
    };
</script>
<style scoped lang="scss">
    /deep/.avue-crud__menu {
        min-height: 0px;
    }

    ///deep/.el-input.is-disabled .el-input__inner {
    //    background-color: #FFF;
    //    color: #606266;
    //}
    ///deep/.el-textarea.is-disabled .el-textarea__inner {
    //    background-color: #FFF;
    //    color: #606266;
    //}
</style>
